{% extends "base.html" %}
{% block title %}电梯绑定{% endblock %}
{% block css %}
<!-- <link rel="stylesheet" href="/lift_base/static/src/css/style.css"> -->
<style>
[v-cloak]{
    display:none;
}
.pad-all-md{
    padding: 15px;
}
.pad-l{
    padding-left:15px;
}
.pad-r{
    padding-right: 15px;
}
.pad-lr{
    padding-left:15px;
    padding-right: 15px;
}
.background-red{
    background: #fe6f70;
}
.background-green{
    background: #4fd2c2;
}
.background-yellow{
    background: #f5911c;
}
.background-blue{
    background: #1492e9;
}
.color-green{
    color: #4fd2c2;
}
.color-yellow{
    color: #f5911c;
}
.color-blue{
    color: #1492e9;
}
.color-grey{
    color: #999999;
}
.lift_bind .head-title{
    margin: 0;
    padding: 0 15px;
    background-color: #f5f5f5;
    font-size: 13px;
    line-height: 36px;
    color: #333333;
}
.lift_bind .head-title i{
    padding-right: 5px;
}
.form-search-group {
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
    overflow: hidden;
    width: 100%;
    padding: 15px;
    z-index: 999;
    background: #ffffff;
    -moz-box-shadow:0px 2px 10px #eeeeee; 
    -webkit-box-shadow:0px 2px 10px #eeeeee; 
    box-shadow:0px 2px 10px #eeeeee;
}
.form-search-group input {
    height: 35px;
    border: 0px;
    outline: none;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #ffffff;
    border-radius: 4px;
    font-size: 13px;
    border: 1px solid #4fd2c2;
}
.lift-list .list-group{
    margin-bottom: 0;
}
.form-search-group .input-group-addon{
    background-color: #4fd2c2;
    border-color: #4fd2c2;
    color: #ffffff;
}
.lift_bind_con{
    padding-top: 65px;
}
.lift-list .list-group .list-group-item{
    font-size: 12px;
    border: 1px solid #f0f0f0;
    color: #999999;
    line-height: 20px;
    border-radius: 0;
}
.lift-list .list-group-pre .list-group-item:nth-child(2n+1){
    border-left: 5px solid #4fd2c2;
}
.lift-list .list-group-pre .list-group-item:nth-child(2n){
    border-left: 5px solid #ffa954;
}
.border-left-green{
    border-left: 5px solid #4fd2c2;
}
.border-left-yellow{
    border-left: 5px solid #ffa954;
}
.list-group-pre .list-group-item::after{
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -9px;
    content: "\F105";
    width: 18px;
    height: 18px;
    display: inline-block;
    font: normal normal normal 16px/1 FontAwesome;
    color: #999 ;
}
.lift-list .list-group .list-group-item label{
    margin-bottom: 0;
    font-weight: 400;
    color: #999999;
    text-align: left;
}
.width60{
    width: 60px;
}
.width70{
    width: 70px;
}
.width90{
    width: 90px;
}
.width100{
    width: 100px;
}
.lift-list .list-group .list-group-item .right-con{
    flex: 1;
}
.norecord-img img{
    width: 80px;
    padding: 30px 0 10px;
}
.norecord-text {
    font-size: 13px;
}
.display-flex{
    display: flex;
}
.lift-list .list-group .btn-sm{
    padding: 2px 10px;
}
.btn{
    border:none;
}
.img-width50{
    width: 50px;
    height: 50px;
}
.addphoto{
    position: relative;
    width: 50px;
    height: 50px;
    margin: 0 5px 5px;
    float: left;
}
.addphoto-icon{
    width: 50px;
    margin: 0 5px;
    text-align: center;
    font-size: 24px;
}
.bottom-delete{
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    margin: 0;
    color: #FFFFFF;
    background: rgba(0,0,0,0.3);
    text-align: center;
}
.select-option{
    box-sizing: border-box; 
    border: 1px solid #ccc; 
    float: left; 
    height: 30px; 
    line-height: 30px; 
    margin: -1px 0 0 -1px; 
    padding: 0 20px; 
    cursor: pointer; 
    position: relative; 
    min-width: 20px; 
    text-align: center;  
}
.select-option.selected { 
    color: #4fd2c2;
    cursor: not-allowed; 
    border-color: #4fd2c2;  
    background: transparent url("/lift_main/static/src/img/icon-selected.png") no-repeat right bottom; 
}
</style>
{% endblock %}
{% block js %}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=XYeVsCzcw7Rz0cCt3ZnZtBD2ohUTlMXX"></script>
{% endblock %}
{% block content %}
<div id="app">
    <div class="lift_bind">
        <div class="form-search-group">
            <div class="row">
                <div class="col-xs-12">
                    <div class="input-group">
                        <input v-model="searchname" type="text" class="form-control" placeholder="注册代码/出厂编号/使用单位"><span @click="showlist" class="input-group-addon btn">搜索</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="lift_bind_con">
            <h5 class="head-title"><i class="fa fa-bookmark-o"></i>电梯信息</h5>
            <div v-cloak v-show="listorform==='list'" class="lift-list">
                <ul class="list-group list-group-pre">
                    <li v-for="(lift,index) in lift_list" :key="index" @click="showlift(lift.id)" class="list-group-item">
                        <div  class="display-flex"><label class="width70">注册代码：</label><div class="right-con">${lift.register_code?lift.register_code:''}</div></div>
                        <div  class="display-flex"><label class="width70">电梯编号：</label><div class="right-con">${lift.code||''}</div></div>
                        <div  class="display-flex"><label class="width70">出厂编号：</label><div class="right-con">${lift.factory_number||''}</div></div>
                        <div  class="display-flex"><label class="width70">电梯地址：</label><div class="right-con">${lift.use_address||''}</div></div>
                        <div  class="display-flex"><label class="width70">使用单位：</label><div class="right-con">${lift.use_company_id||''}</div></div>
                    </li>
                </ul>
            </div>
            <div v-if="lift_list.length==0" class="text-center">
                <p class="norecord-img"><img src="/lift_main/static/src/img/norecord.png" alt=""></p>
                <p class="norecord-text">没有发现电梯,请拨打96333咨询</p>
            </div>
            <div v-cloak v-show="listorform==='form'" class="lift-list">
                    <ul class="list-group border-left-green">
                        <li class="list-group-item">
                            <div class="display-flex"><label class="width70">注册代码：</label><div class="right-con">${lift_id.register_code||''}</div></div>
                            <div class="display-flex"><label class="width70">出厂编号：</label><div class="right-con">${lift_id.factory_number||''}</div></div>
                            <div class="display-flex"><label class="width70">电梯地址：</label><div class="right-con">${lift_id.use_address||''}</div></div>
                            <div class="display-flex"><label class="width70">维保公司：</label><div v-if="lift_id.maintenance_company_id" class="right-con">${lift_id.maintenance_company_name||''}</div></div>
                            <div class="display-flex"><label class="width70">使用单位：</label><div class="right-con">${lift_id.use_company_id||''}</div></div>
                            
                        </li>
                    </ul>
                    <h5 class="head-title"><i class="fa fa-bookmark-o"></i>绑定标识牌</h5>
                    <ul class="list-group">
                        <li class="list-group-item display-flex">
                            <label class="width70">电梯编号：</label>
                            <div v-if="!lift_id.code" class="right-con">
                                <button  @click="scancard(lift_id.id)" class="btn btn-sm btn-success background-yellow">绑定</button>
                            </div>
                            <div v-else="">${lift_id.code}</div>
                        </li>
                    </ul>
                    <h5 class="head-title" v-show="lift_id.lift_part_ids&&lift_id.lift_part_ids.length>0"><i class="fa fa-bookmark-o"></i>绑定部位牌</h5>
                    <ul class="list-group">
                        <li class="list-group-item display-flex" v-for="(part,index) in lift_id.lift_part_ids" :key="index">
                            <label class="flex-title width70">${part.name}</label>
                            <div v-if="!part.qrcode" class="right-con">
                                <button @click="scancard(lift_id.id,part.id)" class="btn btn-sm btn-primary background-yellow">绑定</button>
                            </div>
                            <div v-else="">${part.qrcode}</div>
                        </li>
                    </ul>
                    <h5 class="head-title"><i class="fa fa-bookmark-o"></i>电梯信息确认</h5>
                    <ul  class="list-group">
                        <li class="list-group-item display-flex">
                            <label class="width70">拍照：</label>
                            <div class="right-con">
                                <i class="fa fa-camera color-green addphoto-icon" @click="takePhoto" v-show="lift_id.bind_image==''"></i>
                                <div v-show="lift_id.bind_image" class="clearfix">
                                    <div class="addphoto">
                                        <img src="" class="img-width50" :src="liftPhoto">
                                        <!-- <p class="bottom-delete"><i class="fa fa-trash-o"></i></p> -->
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li  class="list-group-item display-flex">
                            <label class="width70">网络覆盖：</label>
                            <div class="right-con">
                                <div @click="item.select = !item.select" class="select-option" :class="{selected:item.select}" v-for="(item,index) of allLineOperator" :key="index">${item.name}</div>
                            </div>
                        </li>
                        <li  class="list-group-item display-flex">
                            <div style="display: none">${ln},${la}</div>
                            <label class="width70">导航地址：</label>
                            <div v-show="lift_id.gps_address" class="right-con">${lift_id.gps_address||''}</div>
                            <div v-show="!lift_id.gps_address" class="right-con">${bigAddress}</div>
                        </li>
                        <li v-show="!lift_id.gps_address" class="list-group-item display-flex">
                            <label class="width70">选择详细：</label>
                            <!-- <div v-show="lift_id.gps_address" class="right-con">${lift_id.gps_address||''}</div> -->
                            <div class="right-con">
                                <select class="form-control" v-model="chooseAddress">
                                    <option v-for="(item,index) in arrAddress" :key="index">${item.name}</option>
                                </select>
                            </div>
                        </li>
                    </ul>
                    <div v-show="!lift_id.gps_address" class="text-center  pad-all-md">
                        <button class="btn btn-sm btn-warning background-yellow width100" @click="upInfo">确认</button>
                        <button id="refushMap" class="btn btn-sm btn-warning background-yellow width100" @click="showMap">当前位置</button>
                    </div>
                    <div class="pad-all-md">
                        <div id="container" style="height:200px;border: 3px solid rgb(238, 238, 238);"></div>
                    </div>
                </div>
        </div>
    </div>
</div>
<script>
    var lift_id = {};
    var lift_list = [];
    $(function(){
        var app = new Vue({
            el: '#app',
            delimiters:['${','}'],
            data: {
                disPassWord:'',
                disNumber:'',
                haslift:'{{haslift}}',
                searchname: '',
                listorform:'no',
                lift_id:lift_id,
                lift_list:lift_list,
                code:'{{code}}',
                // 经纬度直接用百度的
                ln:0,
                la:0,
                map:{}, // 百度地图对象
                // gpsAddress:'',
                bigAddress:'', // 百度地址反解析出来的到区县级别的大地址
                chooseAddress:'', // 百度WEBAPI选择的地址name
                arrAddress:[],
                allLineOperator:[] // 所有网络运营商
            },
            watch:{
                listorform:function(){
                    // 如果不是在切换form的时候渲染地图，提前渲染，MARK会因为DIV当时未显示定位在左上角,当已经存在GPS信息的时候需要延时
                    if(this.listorform==='form'){
                        setTimeout('$("#refushMap").click();',500);
                    }
                }
            },
            beforeCreate:function(){
                $.ajax({
                    url:'/wechat/getjsconfig',
                    data:{'url':window.location.href},
                    type: 'POST',
                    success:function(data){
                        data = JSON.parse(data);
                        wx.config({
                            debug : false,
                            appId : data.appId,
                            timestamp : data.timestamp,
                            nonceStr : data.nonceStr,
                            signature : data.signature,
                            jsApiList : ['scanQRCode','getLocation','chooseImage','uploadImage', 'previewImage','downloadImage']
                        });
                    }
                })
            },
            mounted:function(){
                var _this = this;
                if(this.haslift==='yes'){
                    this.searchname = this.code;
                    this.showlist();
                }
                this.map = new BMap.Map("container");
                this.map.centerAndZoom(new BMap.Point(0,0),18);
                this.map.addEventListener('click',showInfo);
                function showInfo(e){
                    _this.getGPSAddress(e.point);
                }
                // 获取所有网络运营商
                _this.getAllLineOperator();
                
            },
            computed:{
                liftPhoto:function(){
                    if(this.lift_id.bind_image){
                        let ur = '/web/image/tyibs.base.lift/'+this.lift_id.id+'/bind_image';
                        return ur
                    }else{
                        return ''
                    }
                },
            },
            methods:{
                getAllLineOperator:function(){
                    var _this = this;
                    $.ajax({
                        url:'/main/lineoperator/all',
                        success:function(data){
                            data=JSON.parse(data);
                            _this.allLineOperator = data;
                        }
                    })
                },
                takePhoto:function(){
                    var _this = this;
                    // 拍照上传
                    wx.chooseImage({
                        count : 9, // 默认9
                        sizeType : ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
                        sourceType : ['camera'], // 可以指定来源是相册还是相机，默认二者都有
                        success : function(res) {
                            var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                            wx.uploadImage({
                                localId : '' + localIds, // 需要上传的图片的本地ID，由chooseImage接口获得
                                isShowProgressTips : 1, // 默认为1，显示进度提示
                                success : function(res) {
                                    var serverId = res.serverId; // 返回图片的服务器端ID
                                    // 通知后台更新图片并前端重新获取照片
                                    _this.upPhoto(serverId);
                                }
                            });
                        }
                    });
                },
                upPhoto:function(serverId){
                    var _this = this;
                    $.ajax({
                        url:'/main/lift/public/upimg',
                        data:{
                            'server_id':serverId,
                            'lift_id':_this.lift_id.id
                        },
                        dataType:'json',
                        success:function(data){
                            _this.lift_id.bind_image = '1';
                        }
                    })
                },
                getGPSAddress:function(point){
                    var _this = this;
                    var mk = new BMap.Marker(point);
                    _this.map.clearOverlays();
                    _this.map.addOverlay(mk);
                    _this.map.panTo(point);
                    // 根据经纬度反向查询地址(原方案)
                    // var geoc = new BMap.Geocoder();
                    // geoc.getLocation(point, function(rs){
                    //     // 这里有个坑，如果把this.ln this.la放在上面刷新，第一次虽然下面的gps_address数据刷新了，但是页面不显示，没有触发页面渲染
                    //     // 并且页面上必须写了ln la属性，哪怕display none 必须要写，不然不会触发深度渲染
                    //     var addComp = rs.addressComponents;
                    //     _this.gpsAddress = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
                    //     _this.ln = point.lng;
                    //     _this.la = point.lat;
                    // });

                    // webAPI（方案二）:webAPI解析出的地址更精确，并且有10个可以选择
                    let url = 'http://api.map.baidu.com/geocoder/v2/?callback=renderReverse\
                                &location='+point.lat+','+point.lng+'\
                                &output=json&pois=1\
                                &ak=RtDOZPq5ifnbLaKWGOYnLL6wNZdPE9ZA';
                    $.ajax({
                        url: url,
                        type:'GET',
                        dataType: "jsonp",
                        contentType:'application/json',
                        data: {},
                        success: function(data){
                            let bigAddress = data.result.addressComponent;
                            let arrAddress = data.result.pois;
                            _this.arrAddress = arrAddress;
                            // 2层地址赋值
                            _this.bigAddress = bigAddress.province+bigAddress.city+bigAddress.district+bigAddress.street;
                            _this.chooseAddress = arrAddress[0].name;
                            _this.ln = point.lng;
                            _this.la = point.lat;
                        }
                    })
                    
                },
                showMap:function(){
                    // 第一次执行在页面切换到form状态，模拟点击刷新地图按钮
                    var _this = this;
                    if(this.lift_id.gps_address){
                        // 已经存在GPS信息
                        this.ln = this.lift_id.ln;
                        this.la = this.lift_id.la;
                        // this.gpsAddress = this.lift_id.gps_address;
                        var point = new BMap.Point(_this.lift_id.ln,_this.lift_id.la);
                        var mk = new BMap.Marker(point);
                        _this.map.clearOverlays();
                        _this.map.addOverlay(mk);
                        _this.map.panTo(point);
                    }else{
                        var geolocation = new BMap.Geolocation();
                        geolocation.getCurrentPosition(function(r){
                            if(this.getStatus() == 0){
                                _this.getGPSAddress(r.point);
                            }
                        },{enableHighAccuracy: true})
                    }
                    
                },
                upInfo:function(){
                    // 更新电梯信息：运营商，新经纬度，新GPS导航地址
                    var opera = [];
                    this.allLineOperator.forEach(function(item){
                        if(item.select){ opera.push(item.id) }
                    })
                    $.ajax({
                        url:'/main/bindlift/write',
                        type:'POST',
                        data:{
                            'line_operator_ids':JSON.stringify(opera),
                            'ln':this.ln,
                            'la':this.la,
                            'gps_address':this.bigAddress+this.chooseAddress,
                            'lift_id':this.lift_id.id
                        },
                        success:function(data){
                            data=JSON.parse(data);
                            if(data.err===0){
                                alert('更新成功');
                            }
                        }
                    })
                },
                scancard:function(lift_id,part_id){
                    var _this = this;
                    wx.scanQRCode({
                        needResult : 1,
                        scanType : ["qrCode", "barCode"],
                        desc : 'scanQRCode desc',
                        success : function(res) {
                            var QRCode = res.resultStr;
                            _this.bindcard(lift_id,part_id,QRCode);
                        }
                    });
                },
                bindcard:function(lift_id,part_id,qrcode){
                    var _this = this;
                    $.ajax({
                        url:'/main/lift/public/bindcard',
                        type:'POST',
                        data:{
                            'lift_id':lift_id,
                            'part_id':part_id?part_id:'',
                            'qrcode':qrcode
                        },
                        dataType:'json',
                        success:function(data){
                            // zrtodo:待美化
                            alert(data.errmessage);
                            _this.showlift(_this.lift_id.id);
                        }
                    })
                },
                showlist:function(){
                    var _this = this;
                    $.ajax({
                        url:'/main/lift/public/search',
                        data:{'searchname':this.searchname},
                        dataType:'json',
                        success:function(data){
                            _this.lift_list = data.lift_list;
                            _this.listorform = 'list';
                        },
                        error:function(data){
                            console.log(data);
                        }
                    });
                },
                showlift:function(num){
                    var _this = this;
                    $.ajax({
                        url:'/main/lift/public/info/'+num,
                        dataType:'json',
                        success:function(data){
                            _this.lift_id = data.lift_info;
                            _this.allLineOperator.forEach(function(item){item.select = false;});
                            _this.lift_id.line_operator_ids.forEach(function(item){
                                _this.allLineOperator.forEach(function(aitem){
                                    if(aitem.id==item.id){aitem.select=true;}
                                })
                            })
                            _this.listorform='form';
                        },
                        error:function(data){
                            console.log(data);
                        }
                    });
                }
            }
        })
    })
</script>
{% endblock %}